<template>
  <view class="filter-date-range" v-if="cfg">
    <uni-datetime-picker class="uni-datetime-picker" v-model="range" type="daterange" @change="changeDateRange" />
    <view class="date-type-checkbox" style="margin-left: 2rem;"
      :class="{'hidden':service==='srvretail_member_report_month_select'}">
      <uni-data-checkbox class="uni-data-checkbox" selectedColor="#38C09E" v-model="radio" :localdata="radioList"
        @change="change">
      </uni-data-checkbox>
    </view>
  </view>
</template>

<script>
  export default {
    name: "filter-date-range",
    props: {
      service: {
        type: String
      },
      cfg: {
        type: Object
      },
    },
    data() {
      return {
        show: false,
        radio: "",
        radioList: [{
            text: '今天',
            value: '今天'
          },
          {
            text: '昨天',
            value: '昨天'
          },
          {
            text: '本周',
            value: '本周'
          },
          {
            text: '本月',
            value: '本月'
          }
        ],
        range: [],
        subList: ['今天', '昨天', '本周', '本月']
      };
    },
    computed: {
      start() {
        if (this.range && this.range[0]) {
          return this.dayjs(this.range[0]).format("YYYY-MM-DD")
        }
      },
      end() {
        if (this.range && this.range[1]) {
          return this.dayjs(this.range[1]).format("YYYY-MM-DD")
        }
      }
    },
    methods: {
      changeDateRange() {
        this.$nextTick(() => {
          this.$emit('change', this.getVal())
        })
      },
      closePicker() {
        this.show = false
      },
      showPicker() {
        this.show = true
      },
      change(e) {
        const value = e.detail.value
        let startDate = ''
        let endDate = ''
        if (value == '今天') {
          startDate = `${ this.dayjs().format("YYYY-MM-DD")} 00:00:00`
          endDate = `${ this.dayjs().format("YYYY-MM-DD")}`
        } else if (value == '昨天') {
          startDate = `${ this.dayjs().subtract(1, 'day').format("YYYY-MM-DD")}`
          endDate = `${ this.dayjs().subtract(1, 'day').format("YYYY-MM-DD")}`
        } else if (value == '本周') {
          startDate = `${this.dayjs().day(1).format("YYYY-MM-DD")}`
          endDate = `${this.dayjs().day(7).format("YYYY-MM-DD")}`
        } else if (value == '本月') {
          startDate = `${this.dayjs().startOf('month').format('YYYY-MM-DD')}`
          endDate = `${this.dayjs().endOf('month').format('YYYY-MM-DD')}`
        }
        this.range = [startDate, endDate]
        this.$nextTick(() => {
          this.$emit('change', this.getVal())
        })
      },
      reset() {
        this.range = []
        this.radio = ''
      },
      getVal() {
        if (this.range.length === 0) {
          return false
        }
        const start = `${ this.dayjs(this.range[0]).format("YYYY-MM-DD")} 00:00:00`
        const end = `${ this.dayjs(this.range[1]).format("YYYY-MM-DD")} 23:59:59`
        return [start, end]
      }
    },
  }
</script>

<style lang="scss" scoped>
  .filter-date-range {
    display: flex;
    align-items: center;
    height: 5rem;

    ::v-deep .uni-datetime-picker {
      height: 5rem;
      min-height: 5rem;

      uni-input,
      input {
        width: 15rem;
        height: 5rem;
        min-height: 5rem;
        font-size: 2.4rem;
      }
    }

    .date-type-checkbox {
      min-width: 55rem;
      position: relative;
      left: 0;
      opacity: 1;

      ::v-deep .checklist-group {
        .checklist-text {
          font-size: 2.4rem !important;
        }
      }

      &.hidden {
        display: none;
      }
    }



    .separator {
      margin: 0 1rem;
    }

    .filter-input {
      display: flex;
      align-items: center;
      border: 1px solid #DCDFE6;
      padding: 0 2rem;
      border-radius: 4px;
      min-width: 31rem;
      justify-content: center;
      min-height: 5rem;
    }
  }
</style>
